import MyCharts from "@/components/MyCharts";
import { Col, Row } from "antd";
import * as echarts from "echarts";
import { useEffect } from "react";

const PageECharts = () => {
  useEffect(() => {
    // 实例化 echarts
    const myCharts = echarts.init(
      document.getElementById("box") as HTMLElement
    );

    myCharts.setOption({
      legend: {
        data: ["1", "2"],
      },
      tooltip: {
        show: true,
        trigger: "axis",
        // formatter: "{a0}: {b0}: {c0}万<br />{a1}: {b1}: {c1}个",
        formatter: (params: any) => {
          // console.log("params", params);
          return params
            .map((item: any) => {
              return `${item.seriesName}: ${item.axisValue}: ${
                item.data / 10000
              }万`;
            })
            .join("<br />");
        },
      },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "1",
          data: [15000, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
        {
          name: "2",
          data: [50, 230, 224, 218, 135, 147, 260],
          type: "bar",
        },
      ],
    });

    function onResize() {
      myCharts.resize();
    }

    window.addEventListener("resize", onResize);

    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, []);

  return (
    <div>
      <h2>ECharts</h2>

      <Row gutter={16}>
        <Col span={6}>
          <div id="box" style={{ width: "100%", height: 200 }}></div>
        </Col>
        <Col span={6}>
          <MyCharts
            options={{
              title: {
                text: "访问量",
              },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: false,
                  data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                },
              ],
              yAxis: [
                {
                  type: "value",
                },
              ],
              series: [
                {
                  name: "Email",
                  type: "line",
                  areaStyle: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "red", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "blue", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  },
                  data: [120, 132, 101, 134, 90, 230, 210],
                },
              ],
            }}
          />
        </Col>
        <Col span={6}>
          <MyCharts
            options={{
              title: {
                text: "访问量",
              },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: false,
                  data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                },
              ],
              yAxis: [
                {
                  type: "value",
                },
              ],
              series: [
                {
                  name: "Email",
                  type: "line",
                  areaStyle: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "red", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "blue", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  },
                  data: [120, 132, 101, 134, 90, 230, 210],
                },
              ],
            }}
          />
        </Col>
      </Row>
    </div>
  );
};

export default PageECharts;
